<template>
  <div class="params1">
    <!-- 跳转并携带params参数（to的字符串写法） -->
    <!-- 如果使用to字符串传参，需要在路由设置path的时候补充 -->
    <!-- 不建议这种 -->
    <router-link :to="`/params2/${news.age}`">params跳转1</router-link>
    <br />
    <!-- 跳转并携带params参数（to对象的写法） -->
    <router-link
      :to="{
        name: 'params2',
        params: {
          id: news.id,
          title: news.title,
          content: news.content,
          age: news.age,
          name: news.name,
        },
      }"
      replace
      >params跳转2</router-link
    >
    <br />
    <div>{{ news.name }}</div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const news: object = ref({
  id: 1,
  title: "params传参",
  content: "params跳转过来啦",
  age: 10,
  name: "hello Kitty",
});
</script>
<style scoped>
.params1 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>
